// 导入歌词文件
import lrc from './lrc.js';
// 获取音频标签
const media = $('audio')[0];
// 获取ul元素
const ul = $('.box>ul')[0];

// 根据已知的歌词,把ul中的li渲染
// 把lrc拆开为两部分内容
let timeArr = []; // 时间
let lrcArr = []; // 歌词
// 准备一个正则
// [00:08.22]歌词...
let reg = /\[(\d{2}:\d{2})\.\d{2}\](.*)/; // .表示匹配非空格的单个任意字符
/*
  捕获方法：exec()
  2.2 正则表达式有 ()
    + 返回值数组为 [0] 依旧是正则捕获的完整字符串片段
    + 从 [1] 开始 依次是每一个小括号的单独捕获的内容 
*/
lrc.split('\n').forEach(item => {
  let res = reg.exec(item.trim());
  // console.log(res);
  // 0: "[00:00.00]孤勇者 - 陈奕迅"
  // 1: "00:00"
  // 2: "孤勇者 - 陈奕迅"
  if (!res) return; // res为null
  // 把时间放到timeArr 歌词放到lrcArr
  timeArr.push(res[1]);
  lrcArr.push(res[2]);
});

// 使用lrcArr 去渲染ul中的li
ul.innerHTML = lrcArr.reduce((prev, item) => prev + `<li>${item}</li>`, '');

// 给audio绑定一个时间改变事件 timeupdate
media.ontimeupdate = function () {
  // 获取当前播放的时间
  let minutes = Math.floor(this.currentTime / 60);
  let seconds = Math.round(this.currentTime % 60);
  minutes = minutes < 10 ? '0' + minutes : minutes;
  seconds = seconds < 10 ? '0' + seconds : seconds;
  // 渲染当前播放的时间
  $('.currentMinute').text(minutes);
  $('.currentSecond').text(seconds);
  // 播放进度条跟随播放时间变化
  let x = $('.playRange').width() * (this.currentTime / this.duration);
  $('.currentRange').css('width', x);
  $('.playBtn').css('left', x - $('.playBtn').width() / 2);
  checkOver(); // 播放结束更换图标

  // 歌词滚动
  let time = `${minutes}:${seconds}`; // 拼接好时间字符串
  // 找到timeArr中有没有和time匹配的内容 获取对应的索引
  // findIndex()返回符合条件的第一个数组元素的索引，没有符合条件的返回-1
  // find()返回符合条件的第一个数组元素，没有符合条件的返回undefined
  let index = timeArr.findIndex(item => item === time);
  if (index === -1) return; // 没有找到相匹配的time
  // 根据获取的index 来调整ul的top值
  ul.style.top = -index * 40 + 'px';
}

// 检查播放是否结束
function checkOver() {
  if (media.currentTime === media.duration) {
    $('.playOrPause i').removeClass('icon-pause').addClass('icon-play');
  }
}

// 获取并渲染总时长
media.oncanplay = function () {
  let durMin = parseInt(this.duration / 60);
  let durSec = parseInt(this.duration % 60);
  $('.durationMinute').text(durMin < 10 ? '0' + durMin : durMin);
  $('.durationSecond').text(durSec < 10 ? '0' + durSec : durSec);
};

// 点击播放、暂停按钮
$('.playOrPause').click(function () {
  if ($(this).find('i').hasClass('icon-play')) {
    media.play();
    $(this).find('i').removeClass('icon-play').addClass('icon-pause');
  } else {
    media.pause();
    $(this).find('i').removeClass('icon-pause').addClass('icon-play');
  }
});

// 按下空格键触发 点击播放、暂停按钮
document.addEventListener('keyup', e => {
  if (e.keyCode === 32) $('.playOrPause').triggerHandler('click');
});

// 拖拽播放进度条
$('.playRange').mousedown(function (e) {
  media.play(); // 音频播放
  $('.playOrPause i').removeClass('icon-play').addClass('icon-pause'); // 变换图标
  let x = e.offsetX; // 获取鼠标按下位置相对于playRange左侧的距离
  $('.currentRange').css('width', x); // 当前播放进度的长度
  $('.playBtn').css('left', x - $('.playBtn').width() / 2); // 修改进度条上小圆点的位置
  // 修改当前时间
  // x / $('.playRange').width() === 当前时间 / 总时间
  let currTime = Math.round(media.duration * x / $(this).width());
  // 将当前播放的时间设置给多媒体标签
  media.currentTime = currTime;
  $('.playRange')[0].onmousemove = function (e) {
    let x = e.offsetX;
    $('.currentRange').css('width', x);
    $('.playBtn').css('left', x - $('.playBtn').width() / 2);
    let currTime = Math.round(media.duration * x / $(this).width());
    media.currentTime = currTime;
  };
});

let vol = null; // 记录媒体音量
// console.log(media.volume); // 获取媒体当前音量(0~1)，设置音量(0~1) ** 默认值为1 **

$(document).mouseup(function () {
  $('.playRange')[0].onmousemove = null;
  $('.volumeRange')[0].onmousemove = null;
  if (vol === null) return;
  vol = media.volume; // 鼠标松开，拖拽结束，记录声音大小
});

// 拖拽声音进度条
$('.volumeRange').mousedown(function (e) {
  let y = e.offsetY;
  $('.currentVolume').css('height', $(this).height() - y);
  $('.volumeBtn').css('top', y - $('.volumeBtn').height() / 2);
  media.volume = 1 - y / $(this).height();
  // media.volume = ($(this).height() - y) / $(this).height();
  if (media.volume <= 0) {
    $('.volume i').removeClass('icon-sound-on').addClass('icon-sound-off');
  } else {
    $('.volume i').removeClass('icon-sound-off').addClass('icon-sound-on');
  }
  $('.volumeRange')[0].onmousemove = function (e) {
    let y = e.offsetY;
    $('.currentVolume').css('height', $(this).height() - y);
    $('.volumeBtn').css('top', y - $('.volumeBtn').height() / 2);
    media.volume = 1 - y / $(this).height();
    if (media.volume <= 0) {
      $('.volume i').removeClass('icon-sound-on').addClass('icon-sound-off');
    } else {
      $('.volume i').removeClass('icon-sound-off').addClass('icon-sound-on');
    }
  }
});

// 点击静音
$('.volume i').click(function () {
  if ($(this).hasClass('icon-sound-on')) {
    media.muted = true; // 开启静音
    $(this).removeClass('icon-sound-on').addClass('icon-sound-off');
    $('.currentVolume').css('height', 0);
    $('.volumeBtn').css('top', $('.volumeRange').height() - $('.volumeBtn').height() / 2);
    // media.volume = 0;
    // console.log(vol, media.volume); // null 1
  } else {
    media.muted = false; // 关闭静音
    $(this).removeClass('icon-sound-off').addClass('icon-sound-on');
    if (vol === null) vol = 0.5; // 音量默认设置为0.5
    $('.currentVolume').css('height', vol * $('.volumeRange').height());
    $('.volumeBtn').css('top', (1 - vol) * $('.volumeRange').height() - $('.volumeBtn').height() / 2);
    media.volume = vol;
    // console.log(vol, media.volume); // 0.5 0.5
  }
});

let timer = null;

// 鼠标移入移出，控制声音控件的显示与隐藏
$('.volume').hover(
  function () {
    clearTimeout(timer);
    $(this).find('.volumeRange').show();
  },
  function () {
    // 鼠标移出之后延迟500ms隐藏
    timer = setTimeout(() => {
      $(this).find('.volumeRange').hide();
    }, 500);
  }
);

// 播放倍速调整
$('.rate').hover(function () {
  $(this).find('.list').stop().slideDown();
}, function () {
  $(this).find('.list').stop().slideUp();
});

$('.rate .list').find('li').on('click', function () {
  $(this).addClass('active').siblings().removeClass('active');
  media.playbackRate = $(this).text();
});

// 禁止选中文字
document.addEventListener('selectstart', e => e.preventDefault());